<template>
  <el-container>
    <el-dialog
      v-model="dialogVisible"
      title="新增操作"
      width="30%"
      center
      draggable
    >
      <el-form
        :model="form"
        class="addform"
        label-width="auto"
        :rules="addrules"
        ref="ruleFormRef"
      >
        <el-form-item label="名称:" prop="shname">
          <el-input v-model="form.shname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地理位置:">
          <el-input v-model="form.location" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmadd(form)"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="editVisible"
      title="编辑操作"
      width="30%"
      center
      draggable
    >
      <el-form
        :model="editform"
        class="addform"
        label-width="auto"
        :rules="editrules"
        ref="editFormRef"
      >
        <el-form-item label="名称:" prop="shname">
          <el-input v-model="editform.shname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地理位置:" >
          <el-input v-model="editform.location" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmedit(editform)"
            >确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-header class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="input1" placeholder="请输入仓库名字">
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          <el-button type="primary" @click="select(input1)">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="dialogVisible = true"
            >新增</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-popconfirm
            confirm-button-text="Yes"
            cancel-button-text="No"
            :icon="InfoFilled"
            icon-color="red"
            title="你真的要确认批量删除消息么"
            @confirm="alldelete(multipleSelection)"
          >
            <template #reference>
              <el-button type="danger">批量删除</el-button>
            </template>
          </el-popconfirm>
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="3"><span>仓库表</span></el-col>
      </el-row>
    </el-header>

    <el-main class="table-box">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @selection-change="changemult"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column prop="shid" label="编号" width="100"> </el-table-column>
        <el-table-column prop="shname" label="名称" width="600">
        </el-table-column>
        <el-table-column prop="location" label="地理位置" width="240">
        </el-table-column>

        <el-table-column label="单项操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >

            <el-popconfirm
              confirm-button-text="Yes"
              cancel-button-text="No"
              :icon="InfoFilled"
              icon-color="red"
              title="你确定要删除该行消息么"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import {
  getstorehouse,
  getstorehousedata,
  updatestorehousebyid,
  savestorehouse,
  deletestorehousebyid,
} from "@/apis/storeData.js";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  components: {
    Search,
  },  
  data() {
    return {
      multipleSelection: [],
    };
  },
  methods: {
    changemult(val) {
      let ids = [];
      for (let i in val) {
        ids.push(val[i].shid);
      }
      window.console.log(ids);
      this.multipleSelection = ids;
    },
  },

  setup() {
    const input1 = ref("");
    const dialogVisible = ref(false);
    let editVisible = ref(false);

    let tableData = ref("");

    const form = reactive({
      shname: "",
      location: "",
    });

    const editform = reactive({
      shid: "",
      shname: "",
      location: "",
    });

    const postform = {
      shid: "",
      shname: "",
      location: "",
    };

    const addrules = reactive({
      shname: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
    });

    const editrules = reactive({
      shname: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
    });


    onMounted(() => {
      getdata();
    });

    function getdata() {
      getstorehouse().then((res) => {
        tableData.value = res.data.page.list;
      });
    }

    function select(prop) {
      let shname = { shname: prop };
      getstorehousedata(shname).then((res) => {
        tableData.value = res.data.page.list;
      });
    }

    function handleEdit(index, row) {
      editVisible.value = true;
      editform.shid = row.shid;
      editform.shname = row.shname;
      editform.location = row.location;
    }

    function confirmadd(form) {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          postform.shid = null;
          postform.shname = form.shname;
          postform.location = form.location;



          savestorehouse(postform).then((res) => {
            if (res.data.code == 0) {
              ElMessage({
                message: "新增成功",
                type: "success",
              });
              getdata();
            } else {
              ElMessage({
                message: "新增失败",
                type: "error",
              });
            }
          });
          dialogVisible.value = false;
        } else {
          ElMessage({
            message: "输入表单不符合规则",
            type: "error",
          });
        }
      });
    }

    function confirmedit(form) {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          postform.shid = form.shid;
          postform.shname = form.shname;
          postform.location = form.location;


          updatestorehousebyid(postform).then((res) => {
            if (res.data.code == 0) {
              ElMessage({
                message: "编辑成功",
                type: "success",
              });
              getdata();
            } else {
              ElMessage({
                message: "编辑失败",
                type: "error",
              });
            }
          });

          editVisible.value = false;
        } else {
          ElMessage({
            message: "编辑表单不符合规则",
            type: "error",
          });
        }
      });
    }

    function alldelete(data) {
      if (data.length == 0) {
        ElMessage({
          message: "你好像没有选中删除的数据项",
          type: "warning",
        });
      } else {
        deletestorehousebyid(data).then((res) => {
          if (res.data.code == 0) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            getdata();
          } else {
            ElMessage({
              message: "删除失败",
              type: "error",
            });
          }
        });
      }
    }

    function handleDelete(index, row) {
      //删除操作
      let shid = [row.shid];

      deletestorehousebyid(shid).then((res) => {
        if (res.data.code == 0) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          getdata();
        } else {
          ElMessage({
            message: "删除失败",
            type: "error",
          });
        }
      });
    }

    return {
      input1,
      tableData,
      dialogVisible,
      editVisible,
      select,
      addrules,
      editrules,
      confirmadd,
      editform,
      handleEdit,
      handleDelete,
      confirmedit,
      alldelete,
      form,
    };
  },
});
</script>
<style scoped>
.head {
  font-size: 18px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
.addform >>> .el-form-item {
  padding-left: 8%;
}
.addform >>> .el-input {
  width: 80%;
}
</style>